import { Skeleton } from 'antd';
import { SvgIcon } from '@/components/icon';
import NotData from '@/components/NotData';
import LineChart from '../components/LineChart';
import { LineChartDataItem } from '@/types/know/know';
import { ArrowRightOutlined } from '@ant-design/icons';
import { Tooltip, Button } from '@/components/eai-design';

interface UnknownProps {
  unknownAsked: {
    unknownCount: number;
    percent: number | '-';
    isRise: boolean;
    data: LineChartDataItem[];
  };
  statisticsLoading: boolean;
  tooltipMap: Record<string, string>;
  activeRange: string;
  onShowDetail: () => void;
}
const unknown = ({
  unknownAsked,
  statisticsLoading,
  tooltipMap,
  activeRange,
  onShowDetail,
}: UnknownProps) => {
  return (
    <div
      className="w-1/3 rounded-default p-4 "
      style={{ backgroundColor: '#fff', position: 'relative', zIndex: 1, minWidth: '500px' }}
    >
      <div className="flex h-[40px] items-center justify-between  ">
        <div className="flex items-center text-xl font-semibold">
          <div className="mr-2 h-3 w-3  rounded-full border-[3px] border-[#1B6DFA]"></div>
          AI无法回答问题
          <Tooltip title={tooltipMap['AIAnswer']}>
            <div className="flex">
              <SvgIcon size={16} icon="report-is1" className="ml-1" />
            </div>
          </Tooltip>
        </div>
        {unknownAsked.percent !== 0 && (
          <Button type="text" onClick={onShowDetail}>
            详情
            <ArrowRightOutlined />
          </Button>
        )}
      </div>
      {unknownAsked.percent !== 0 && (
        <div className=" my-2 flex items-center justify-between gap-4">
          <div className="  h-[98px] w-full  rounded-md     bg-fill-1 p-4  py-2  text-text-4 ">
            <div className="flex items-center text-sm ">
              <SvgIcon size={16} icon="report-is-unknown" className="mr-1" />
              问题数
            </div>
            <div className="my-1">
              <span className="mr-1 text-2xl font-extrabold text-text-5">
                {unknownAsked.unknownCount}
              </span>
            </div>
            <div className="flex items-center">
              <>
                <span className="text-sm text-text-4">
                  {activeRange === '7days' ? ' 周' : activeRange === '30days' ? '月' : ''}
                  环比
                  <span
                    className={` px-1 ${
                      unknownAsked.percent === '-' || unknownAsked.percent === 0
                        ? ''
                        : unknownAsked.isRise
                        ? 'text-success'
                        : 'text-error'
                    }
                        `}
                  >
                    {unknownAsked.percent !== '-' &&
                    unknownAsked.percent !== 0 &&
                    unknownAsked.isRise
                      ? '+'
                      : '-'}
                    {unknownAsked.percent == '-'
                      ? ''
                      : (() => {
                          const percent = (unknownAsked.percent * 100).toFixed(2);
                          return percent.endsWith('.00')
                            ? `${parseInt(percent, 10)}%`
                            : `${percent}%`;
                        })()}
                  </span>
                </span>
                {unknownAsked.percent !== '-' && unknownAsked.percent !== 0 && (
                  <SvgIcon
                    size={16}
                    icon={unknownAsked.isRise ? 'report-is-top ' : 'report-is-bottom'}
                  />
                )}
              </>
            </div>
          </div>
        </div>
      )}
      <div className="mt-2">
        {statisticsLoading ? (
          <Skeleton active paragraph={{ rows: 5 }} style={{ padding: '10px' }} />
        ) : (
          <div className="h-[220px] overflow-hidden">
            {unknownAsked.percent !== 0 ? (
              <LineChart data={unknownAsked.data} height={200} text="未知" />
            ) : (
              <div className="">
                <NotData />
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
};
export default unknown;
